<!-- 新建实物奖品 -->
<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" width="40%">
    <template #title>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <span v-if="vdata.isAdd">新增机构公众号</span>
        <span v-else>修改机构公众号</span>
      </div>
    </template>
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      layout="vertical"
      labelAlign="left"
      :rules="vdata.rules"
      :colon="false"
      :wrapper-col="{ span: 22 }"
      style="margin: 30px 0 30px 20px;"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="appid" name="appId">
            <a-input v-model:value="vdata.saveObject['appId']" placeholder="请输入appid" :disabled="!vdata.isAdd" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="appsecret" name="appSecret">
            <a-input v-model:value="vdata.saveObject['appSecret']" :placeholder="vdata.appSecretPlaceholder" :disabled="!vdata.isAdd" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="公众号名称" name="name">
            <a-input v-model:value="vdata.saveObject['name']" :placeholder="'请输入公众号名称'" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="机构" name="agentNo">
            <GzTreeSelect ref="gzThreeRef" v-model:value="vdata.saveObject['agentNo']" :disabled="!vdata.isAdd" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="公众号获取open_id配置的url" name="authUrl" :wrapper-col="{ span: 23 }">
            <a-input v-model:value="vdata.saveObject['authUrl']" placeholder="公众号获取open_id配置的url" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="公众号二维码" name="imgUrl">
            <GzUpload v-model:src="vdata.saveObject['imgUrl']" bizType="WeChat" />
            <!-- <a-input v-model:value="vdata.saveObject['authUrl']" placeholder="公众号获取open_id配置的url"></a-input> -->
          </a-form-item>
        </a-col>
        <a-col span="11">
          <a-form-item label="是否已解除绑定" name="isDeleted">
            <a-radio-group v-model:value="vdata.saveObject['isDeleted']" @change="changeFuncDeleted">
              <a-radio :value="0">否</a-radio>
              <a-radio :value="1">是</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col span="11">
          <a-form-item label="是否为默认应用" name="isDefault">
            <a-radio-group v-model:value="vdata.saveObject['isDefault']" :disabled="!vdata.isAdd" @change="changeFuncDefault">
              <a-radio :value="0">否</a-radio>
              <a-radio :value="1">是</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" name="remark" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['remark']" :rows="3" placeholder="请输入备注" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider orientation="left">
        <a-tag color="#FF4B33">
          服务器配置
        </a-tag>
      </a-divider>
      <a-row>
        <!-- <a-col :span="12">
          <a-form-item label="消息通道" name="wxOfficialChannel">
            <a-select v-model:value="vdata.saveObject['wxOfficialChannel']" :placeholder="'请选择消息通道'">
              <a-select-option :value="'WxChat'">服务托管</a-select-option>
              <a-select-option :value="'498'">498通道</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <!-- <template v-if="vdata.saveObject['wxOfficialChannel'] === 'WxChat'"> -->
        <a-col :span="12">
          <a-form-item label="消息加解密方式" name="encryptType">
            <a-select v-model:value="vdata.saveObject['encryptType']" :placeholder="'请选择消息加解密方式'">
              <a-select-option :value="'0'">明文模式</a-select-option>
              <a-select-option :value="'1'">兼容模式</a-select-option>
              <a-select-option :value="'2'">安全模式</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="令牌（Token）" name="token">
            <a-input v-model:value="vdata.saveObject['token']" :placeholder="vdata.tokenPlaceholder" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="消息加解密密钥" name="aesKey">
            <a-input v-model:value="vdata.saveObject['aesKey']" :placeholder="vdata.aesKeyPlaceholder" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="微信公众号原始ID" name="originalId">
            <a-input v-model:value="vdata.saveObject['originalId']" :placeholder="'请输入微信公众号原始ID'" />
          </a-form-item>
        </a-col>
        <!-- </template> -->
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="()=>{vdata.visible = false}">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
// import { $agentLiteAddOrEdit } from '@/api/proxy/officialManage/proxyOfficialManage/index'
import {$apiAgentAppAdd,$apiAgentAppUpdate,$apiAgentAppDetail} from '@/api/proxy/programManage/lite/index'
import { reactive, ref, defineExpose, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const formRef = ref()
const gzThreeRef = ref()

const props = defineProps(['callbackFunc'])

const vdata:any = reactive({
  isAdd: false, // 新增OR修改
  visible: false,
  btnLoading: true,
  saveObject: {},
  rules: {
    appId: [{ required: true, message: 'appid不能为空', trigger: 'blur' },],
    appSecret: [{ required: true, message: 'appsecret不能为空', trigger: 'blur' },],
    name: [{ required: true, message: '公众号名称不能为空', trigger: 'blur' },],
    type: [{ required: true, message: '类型不能为空', trigger: 'blur' },],
    authUrl: [{ required: true, message: '公众号获取open_id配置的url不能为空', trigger: 'blur' },],
    imgUrl: [{ required: true, message: '公众号二维码不能为空', trigger: 'blur' },],
    agentNo: [{ required: true, message: '机构不能为空', trigger: 'blur' },],
    remark: [{ required: true, message: '备注不能为空', trigger: 'blur' },],
    encryptType: [{ required: true, message: '请选择加密方式', trigger: 'change' },],
    originalId: [{ required: true, message: '微信公众号原始ID不能为空', trigger: 'blur' },],
  },
})


// 是否已解除绑定
function changeFuncDeleted (e){
  vdata.saveObject.isDeleted = e.target.value
  console.log(e.target.value)
}
// 是否为默认应用
function changeFuncDefault (e){
  console.log(e.target.value)
  vdata.saveObject.isDefault = e.target.value
}

function handleOkFunc() {
  formRef.value.validate().then(()=>{
    vdata.btnLoading = true
    let message = vdata.isAdd ? '新增成功' : '修改成功'
    // let method = vdata.isAdd ? 'POST' : 'PUT'
    if(vdata.isAdd){
      // 新增
      // let message = '新增成功'
      $apiAgentAppAdd(vdata.saveObject).then(res=>{
        $infoBox.message.success(message)
        props.callbackFunc()
        vdata.visible = false
      }).finally(()=>{
        vdata.btnLoading = false
      }).catch(()=>{})
    }else{
      // 编辑
      // let message = '修改成功'
      $apiAgentAppUpdate(vdata.saveObject).then(res=>{
        $infoBox.message.success(message)
        props.callbackFunc()
        vdata.visible = false
      }).finally(()=>{
        vdata.btnLoading = false
      }).catch(()=>{})
    }
  //   $agentLiteAddOrEdit(method,vdata.saveObject).then(res=>{
  //     $infoBox.message.success(message)
  //     props.callbackFunc()
  //     vdata.visible = false
  //   }).finally(()=>{
  //     vdata.btnLoading = false
  //   })
  // }).catch(()=>{})
})
}

function show(record) {
  vdata.isAdd = !record
  // 重置数据
  vdata.btnLoading = false
  vdata.saveObject = {
    type: 0,
    isDefault:0,//是否为默认应用
    isDeleted:0,//是否已解除绑定
  }
  clearFieldValidate()

  if(vdata.isAdd){ // 新增
    vdata.appSecretPlaceholder = '请输入appsecret'
    vdata.tokenPlaceholder = '请输入token'
    vdata.aesKeyPlaceholder = '请输入消息加解密密钥'
    vdata.rules.token = [{ required: true, message: '请输入令牌(token)', trigger: 'blur' },]
    vdata.rules.appSecret = [{ required: true, message: 'appsecret不能为空', trigger: 'blur' },]
  }else{  // 修改
    vdata.saveObject = JSON.parse(JSON.stringify(record))
    // 处理加密数据 占位回显
    $apiAgentAppDetail({agentAppId:vdata.saveObject.agentAppId}).then(res=>{
    vdata.saveObject = res
    vdata.appSecretPlaceholder = res.appSecret
    vdata.aesKeyPlaceholder = res.aesKey
    vdata.tokenPlaceholder = res.token
    delete vdata.saveObject.appSecret
    delete vdata.rules.appSecret
    delete vdata.rules.token
    delete vdata.saveObject.aesKey
    delete vdata.saveObject.token
    })
    
  }
  vdata.visible = true
}
// 清除字段验证
function clearFieldValidate(){
  if (formRef.value !== undefined) {
    formRef.value.clearValidate()
  }
}

defineExpose({
  show,
})
</script>

<style lang="less" scoped>
.rule{
  display: flex;
  align-items: center;
  gap: 20px;
  *{
    flex-shrink: 0;
  }
  &:nth-child(n + 2){
    margin-top: 10px;
  }
}
.cp{
  cursor: pointer;
}
.fz18{
  font-size: 18px;
}
</style>
